<template>
  <div class="container">
    <el-collapse-transition name="el-zoom-in-top">
      <RoleList
        ref="roleListRef"
        @permission="handelOpenPermission"
        v-show="roleListVisible"
      ></RoleList>
    </el-collapse-transition>
    <el-collapse-transition name="el-zoom-in-bottom">
      <Permission
        v-if="!roleListVisible"
        :roleInfo="roleInfo"
        @closePermission="roleListVisible = true"
        @refresh="handleRefresh"
      ></Permission>
    </el-collapse-transition>
  </div>
</template>

<script>
import RoleList from "./RoleList.vue";
import Permission from "./Permission.vue";

export default {
  components: { RoleList, Permission },
  data() {
    return {
      roleListVisible: true,
      // 角色id
      queryRoleId: "",
      // 角色名称
      roleName: "",
    };
  },
  methods: {
    handelOpenPermission(roleInfo) {
      this.roleListVisible = false;
      this.roleInfo = roleInfo;
    },
    handleRefresh(status) {
      this.$refs.roleListRef.refreshChange();
      this.roleInfo.status = status;
    },
  },
};
</script>